<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 500px;
            height: 500px;
            background-color: #f00;
        }

        .a {
            width: 300px;
            height: 300px;
            background-color: #ff0;
        }

        .a1 {
            width: 100px;
            height: 100px;
            background-color: #000;
        }
    </style>
</head>

<body>

    <div class="box">
        <div class="a">
            <div class="a1"></div>
        </div>
    </div>

    <script>


        // 事件流：页面接受事件的顺序
        //    冒泡流(IE) ： 由内向外传播
        //    捕获流(netscape) :  由外向内触发

        // W3C同时支持两种事件流，最终默认支持冒泡流



        // 事件机制和事件流

        // 什么是事件流：事件流描述的是从页面中接受事件的顺序

        // 但有意思的是，微软（IE）和网景（Netscape）开发团队居然提出了两个截然相反的事件流概念，IE的事件流是事件冒泡流(event bubbling)，而Netscape的事件流是事件捕获流(event capturing)

        // 事件捕获：事件捕获流的思想是不太具体的DOM节点应该更早接收到事件，而最具体的节点应该最后接收到事件

        // 事件冒泡：IE提出的事件流叫做事件冒泡，即事件开始时由最具体的元素接收，然后逐级向上传播到较为不具体的节点


        // IE提出的是冒泡流，而网景提出的是捕获流，后来在W3C组织的统一之下，JS支持了冒泡流和捕获流，但是目前低版本的IE浏览器还是只能支持冒泡流(IE6,IE7,IE8均只支持冒泡流)，所以为了能够兼容更多的浏览器，建议大家使用冒泡流。

        // 事件流包含的三个阶段：事件捕获阶段、处于目标阶段、事件冒泡阶段


        var oBox = document.querySelector('.box');
        var oA = document.querySelector('.a');
        var oA1 = document.querySelector('.a1');

        oBox.addEventListener('click', function () {
            console.log(1);
        })
        oA.addEventListener('click', function () {
            console.log(2);
        })

        oA1.addEventListener('click', function () {
            console.log(3);
        })


    </script>

</body>

</html>